// 提供一个显示xtx-message组件的函数
// 这个函数将来: 可以导入直接使用,也可以挂在在Vue实例原型上
// import Message form 'Message.js' 使用 Message({type:'success',text:'提示文字'})

// 1.导入消息提示组件
import XtxMessage from './xtx-message.vue'
import { createVNode, render } from 'vue'

// 3.准备一个装载消息组件的容器
const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)

// 定时器标识
let timer = null

/**
 * @param type 消息类型
 * @param text 提示文字
 * @param time 消息提示显示时间: 1000表示1秒, 默认为3000
 */
export default ({
  type,
  text
}, time = 3000) => {
  // 渲染组件
  // 1.导入消息提示组件
  // 2.将消息提示组件编译位虚拟节点(虚拟DOM)
  // createVNode(组件,属性对象给(props))
  const vnode = createVNode(XtxMessage, {
    type,
    text
  })
  // 3.准备一个装载消息组件的容器
  // 4.将虚拟节点渲染在容器中
  // render(虚拟节点,DOM容器)
  render(vnode, div)
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, time)
}
